<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
        <script>
            $(function(){
                $("#username").blur(function () {
                    $.ajax("${pageContext.request.contextPath}/ajax/validateUsername",
                           {type:"POST",
                            data:{"username":$(this).val()},
                            dataType:"text",
                            success:function(message){
                                $("#usernameMessage").text(message);
                            }
                           });
                });


                $("#show").click(function(){
                    $.getJSON("${pageContext.request.contextPath}/ajax/getEmp",
                              function (emp) {
                                  $("#id").text(emp.id);
                                  $("#name").text(emp.name);
                                  $("#password").text(emp.password);
                                  $("#email").text(emp.email);
                              });
                });


            });
        </script>
    </head>
    <body>
        用户名：<input id="username" type="text" name="username"/>
               <span id="usernameMessage"></span>

        <hr/>

        <a href="javascript:;" id="show">显示数据</a>
        <hr/>
        编号:<span id="id"></span><br/>
        姓名:<span id="name"></span><br/>
        密码:<span id="password"></span><br/>
        邮箱:<span id="email"></span><br/>

    </body>
</html>
